<template>
    <div>
        <!-- 登录服务器 -->
        <form class="form" @submit.prevent="onSubmit">
            <label>用户名:
            <input type="text" v-model="username">
            </label>

            <label>
                密码:
                <input type="password" v-model="passwork">
            </label>

            <!-- remember -->
            <label>
                <input type="checked" v-model="checked">
                remember pa
            </label>

            <!-- 选择地狱 -->
            <label>
                <select v-model="selected">
                    <option v-for="(item,index) in seleclist" :key="index">
                        {{item.label}}
                    </option>
                </select>
            </label>

            <!-- 选择性别 -->
            <label>
                <section>
                    <label>
                       <input v-model="sex" 
                                type="radio" 
                                name=sex :value="1">男
                    </label>
                    <label>
                        <input v-model="sex" 
                                type="radio" 
                                name=sex :value="2">女
                    </label>
                    
                </section>
            </label>

            <label>
                <button>提交</button>
            </label>
        </form>
        
    </div>
</template>
<style>
/* npm i axios 或 yarn */
.form > label{
    display: block;
    border-bottom: 1px dashed #666;
}
</style>

<script>
export default {
    data(){
        return {
            username:"",
            passwork:"123",
            checked:"",//是否记住密码
            seleclist:[
                {label:"中国",id:"cn"},
                {label:"外国",id:"en"}
                ],
            selected:"",//下拉选择地区
            sex:"",//1 男 2 女
            a:""
        }
    },
    methods:{
        onSubmit(){
            console.log(this.$data)
        }
    }
}
</script>